import { invokeUsingPOST } from '@/services/api-backend/interfaceInfoController';
import ProCardDivider from '@ant-design/pro-card/es/components/Divider';
import { PageContainer, ProColumns, ProDescriptions } from '@ant-design/pro-components';
import '@umijs/max';
import { Button, Card, Drawer, Form, Input } from 'antd';
import React, { useState } from 'react';

export type FormValueType = Partial<API.InterfaceInfoAddRequest | API.InterfaceInfoEditRequest>;

export type UpdateFormProps = {
  // 是否新增
  isAdd: boolean;
  // open?
  open: boolean;
  // 关闭modal
  onCancel: () => void;
  // 提交modal
  onSubmit: (values: FormValueType) => Promise<void>;
  // edit row
  currentRow?: API.InterfaceInfoVO;
};

type LayoutType = Parameters<typeof Form>[0]['layout'];

const columns: ProColumns<API.BaseResponsePageInterfaceInfoVO>[] = [
  {
    title: '接口名称',
    dataIndex: 'name',
    copyable: true,
  },
  {
    title: '接口地址',
    dataIndex: 'url',
    copyable: true,
  },
  {
    title: '描述',
    dataIndex: 'description',
    valueType: 'textarea',
    hideInSearch: true,
  },
  {
    //   GET,HEAD,POST,PUT,PATCH,DELETE,OPTIONS,TRACE 0 - 7
    title: '请求方法',
    dataIndex: 'requestMethod',
    filters: true,
    onFilter: true,
    valueEnum: {
      GET: {
        text: 'GET',
        status: 'Default',
      },
      HEAD: {
        text: 'HEAD',
        status: 'Processing',
      },
      POST: {
        text: 'POST',
        status: 'Default',
      },
      PUT: {
        text: 'PUT',
        status: 'Processing',
      },
      PATCH: {
        text: 'PATCH',
        status: 'Default',
      },
      DELETE: {
        text: 'DELETE',
        status: 'Processing',
      },
      OPTIONS: {
        text: 'OPTIONS',
        status: 'Default',
      },
      TRACE: {
        text: 'TRACE',
        status: 'Processing',
      },
    },
  },
  {
    title: '请求参数',
    dataIndex: 'requestParams',
    hideInTable: true,
    hideInSearch: true,
    valueType: 'jsonCode',
  },
  {
    title: '请求头',
    dataIndex: 'requestHeader',
    hideInTable: true,
    hideInSearch: true,
    valueType: 'jsonCode',
  },
  {
    title: '响应头',
    dataIndex: 'responseHeader',
    hideInTable: true,
    hideInSearch: true,
    valueType: 'jsonCode',
  },
  {
    title: '接口状态',
    dataIndex: 'status',
    valueType: 'select',
    valueEnum: {
      0: {
        text: '关闭',
        status: 'Error',
      },
      1: {
        text: '开启',
        status: 'success',
      },
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateTime',
    hideInSearch: true,
    hideInForm: true,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    valueType: 'dateTime',
    hideInSearch: true,
    hideInForm: true,
  },
];

const EditForm: React.FC<UpdateFormProps> = (props) => {
  const onCancel = props.onCancel;
  const currentRow = props.currentRow;
  const open = props.open;

  const [formLayout, setFormLayout] = useState<LayoutType>('vertical');
  const [form] = Form.useForm();

  const [invokeRes, setInvokeRes] = useState<string>('');
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: any) => {
    console.log(values);
    setLoading(true);
    try {
      const res = await invokeUsingPOST({
        id: currentRow.id,
        ...values,
      });
      setInvokeRes(res.data);
    } catch (e) {}
    setLoading(false);
  };

  return (
    <Drawer
      open={open}
      title={'接口详情'}
      onClose={() => {
        form.resetFields();
        setInvokeRes('')
        onCancel();
      }}
      footer={[]}
      width={800}
      destroyOnClose={true}
    >
      <PageContainer>
        <Card>
          <ProDescriptions
            title={currentRow?.name}
            column={1}
            dataSource={currentRow}
            columns={columns}
          ></ProDescriptions>
        </Card>
        <ProCardDivider />
        <Card>
          <Form
            layout={formLayout}
            form={form}
            style={{ maxWidth: formLayout === 'inline' ? 'none' : 600 }}
            onFinish={onFinish}
          >
            <Form.Item label="请求参数" name={'requestParams'}>
              <Input.TextArea placeholder="请求参数" autoSize={{ minRows: 5 }} />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType={'submit'}>
                在线调试
              </Button>
            </Form.Item>
          </Form>
        </Card>
        <ProCardDivider />
        <Card loading={loading}>响应结果：{invokeRes}</Card>
      </PageContainer>
    </Drawer>
  );
};
export default EditForm;
